<template>
  <el-dialog title="仓库查询" :close-on-click-modal="false" :visible.sync="visible" top="-20px" fullscreen append-to-body center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-divider content-position="left">查询条件</el-divider>
    <div class="text item">
      <el-form inline size="mini">
        <el-form-item label="仓库代码">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getDataList">查询</el-button>
          <el-button icon="el-icon-delete" type="info" @click="clearSearchForm">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider content-position="left">查询数据</el-divider>
    <div class="avue-crud__pagination" style="margin-bottom: 25px;">
      <el-button icon="el-icon-check" type="primary" @click="checkStocks" size="mini">选 择</el-button>
    </div>

    <el-table :data="dataList" ref="stockInfo" border v-loading="dataListLoading" @select-all="allSelect" @select="onTableSelect" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column key="2" prop="code" label="商品代码"></el-table-column>
      <el-table-column key="3" prop="name" label="商品名称"></el-table-column>
    </el-table>
    <div class="avue-crud__pagination" style="margin-bottom: 25px;">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>

  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams, deduplication } from '@/util/tools'
  import { fetchStockList } from '@/api/eims/stock'
  export default {
    data() {
      return {
        visible: false,
        disabled: false,
        formData: [],
        dataForm: {
          id: '',
          code: '',
          name: ''
        },
        dataList: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        stockSelection: [],
        selected: true,
        rowItem: {}
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.pageIndex = 1
        this.formData = data || []
        this.dataList = []
        this.getDataList()
      },
      //	清空查询表单
      clearSearchForm() {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
      },
      allSelect(selection){
        this.stockSelection = selection
      },
      // 获取数据列表
      getDataList() {
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        fetchStockList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
            this.$nextTick(() => {
              this.formData.forEach(item => {
                for (let i = 0; i < this.dataList.length; i++) {
                  let idVal = item
                  if (item == this.dataList[i].id) {
                    this.$refs.stockInfo.toggleRowSelection(this.dataList[i], true)
                  }
                }
              })
            })
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      handleSelectionChange(val) {
        // this.stockSelection = deduplication(this.stockSelection.concat(val),'id')
        if(this.selected) {
          this.stockSelection = deduplication(this.stockSelection.concat(val),'id')
        }else{
          this.stockSelection.forEach((item,index) => {
            if(item.id == this.rowItem.id){
              this.stockSelection.splice(index,1)
            }
          })
        }
      },
      //  判断当前操作的属性是勾选还是取消勾选
      onTableSelect(rows,row) {
        this.selected = rows.length && rows.indexOf(row) !== -1
        this.rowItem = row
      },
      //  选择并关闭
      checkStocks() {
        this.visible = false
        this.$emit('refreshData', this.stockSelection)
      },
    }
  }
</script>

<style>
</style>
